<template>
  <div class="read">
      <div class="container">
        <div class="topBar">
            <div class="iconfont icon-daohangliebiao navIcon fl" @click="toggleShow"></div>
            <h3>西部牛仔</h3>
        </div>
        <div class="articleContainer">
            <div class="content" v-html="content"></div>
            <div class="listBtnCon">
               <router-link :to='{
                      path:"/Read",
                      query:{
                        id:transIdBack,
                        bookid:bookId,
                        isclose:true
                      }
                    }' class="listBtn" v-if="transIdBack!=0">上一章</router-link>
                    <router-link :to='{
                      path:"/Read",
                      query:{
                        id:transIdNext,
                        bookid:bookId,
                        isclose:true
                      }
                    }' class="listBtn" v-if="transIdNext!=0">下一章</router-link>
            </div>
        </div>
        <!-- 左侧目录 -->
        
        <div class="leftCatalog" v-show="showFlag">
            <div class="shadow" v-show="showFlag" @click="closeCatalog"></div>
            <transition  name="leftPop">
                <div class="catalogContent" v-show="showFlag">
                    <h3>西部牛仔</h3>
                    <ul class="cataloglist">
                       <li v-for="(item,index) in list" :key="index">
                    <router-link :to='{
                      path:"/Read",
                      query:{
                        id:item.id,
                        bookid:item.book_id,
                        isclose:true
                      }
                    }'>{{item.chp_index}}：{{item.title}}</router-link>
                </li>
                    </ul>
                </div>
            </transition>
            
        </div>
        <!-- 底部点赞，评论，分享 -->
        <div class="bottomBar">
            <ul>
                <li class="icon-heart iconfont"></li>
                <li class="icon-pinglun iconfont"></li>
                <li class="icon-fenxiang iconfont"></li>
            </ul>
        </div>
        <div class="pop">
            <div class="popshadow" v-show="moneyPop"></div>
            <!-- 付费章节的弹窗 -->
            <div class="paid" v-show="moneyPop">
                <p>本章为付费章节，请前往。。。</p>
                <a href="">确定</a>
            </div>
            <!-- 订阅所有章节 -->
            <div class="paidall" v-show="moneyPop">
                <p><span class="icon-fuxuankuangxuanzhong iconfont"></span>订阅本书所有章节</p>
                <a href="">确定</a>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import axios from "axios";
import url from "@/serviceAPI.config.js";
export default {
  name: "read",
  data() {
    return {
      showFlag: false,
      moneyPop: false,
      list: "", //章节
      content: "", //内容
      transIdBack: "", //上一章id
      transIdNext: "", //下一章id
      bookId: "" //书籍id
    };
  },
  created() {
    this.getContent();
    this.getList();
  },
 watch: {  
  '$route' (to, from) {  
    // data数据操作  
    console.log(from)
    this.getContent();
    this.getList();
  }  
},
  methods: {
    toggleShow: function() {
      this.showFlag = true;
    },
    closeCatalog: function() {
      this.showFlag = false;
    },
    getList:function() {
      axios({
      url: url.list + "?id=1",
      methods: "get"
    })
      .then(reponse => {
        if (reponse.status == 200) {
          if (reponse.data.Data) {
            this.list = reponse.data.Data; //章节
          }
        }
      })
      .catch(error => {
        alert("网络错误，请稍后再试");
      });
    },
    getContent: function() {
      let listID = this.$route.query.id;
      console.log("listID----"+listID)
      let bookID = this.$route.query.bookid;
      if (this.$route.query.isclose) {
        this.showFlag = false;
      }
      axios({
        url: url.content + "?id=" + listID + "&bookid=" + bookID,
        methods: "get"
      })
        .then(reponse => {
          if (reponse.status == 200) {
            console.log(reponse);
            if (reponse.data.Data) {
              this.content = reponse.data.Data.content.content;
              this.bookId = reponse.data.Data.bookid;
              this.transIdBack = reponse.data.Data.preid;
              this.transIdNext = reponse.data.Data.nextid;
              console.log("next" + this.transIdNext);
              console.log("pre" + this.transIdBack);
            }
          }
        })
        .catch(error => {
          alert("网络错误，请稍后再试");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@charset "UTF_8";
body {
  background: #fff;
}

.container {
  padding: 0.2rem;
}

.navIcon {
  position: fixed;
  right: 0.2rem;
  top: 0.2rem;
  z-index: 3;
  font-size: 0.6rem;
  color: #333;
  display: block;
  cursor: pointer;
}

.articleContainer {
  padding: 0.3rem 0;
}

.topBar h3 {
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.34rem;
}

.content {
  width: 7.1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 0.38rem;
  line-height: 0.6rem;
  padding-bottom: 0.8rem;
}

.leftCatalog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.shadow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* display: none; */
}

.catalogContent {
  position: fixed;
  left: 0rem;
  top: 0;
  width: 5rem;
  height: 100%;
  background: #fff;
  z-index: 5;
  font-size: 0.38rem;
  padding: 0.2rem;
}

.catalogContent .cataloglist li {
  padding-top: 0.2rem;
}

.bottomBar {
  position: fixed;
  bottom: 0;
  right: 0;
  display: none;
}

.bottomBar ul {
  display: flex;
  margin: 0.2rem;
}

.bottomBar li {
  font-size: 0.6rem;
  color: #999;
  margin-left: 0.3rem;
}

.paid {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -2.5rem;
  margin-top: -2rem;
  width: 5rem;
  height: 2.6rem;
  background-color: rgba(243, 239, 239, 1);
}

.paid p {
  margin: 0.6rem 0;
  text-align: center;
}

.paid a {
  display: block;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  line-height: 0.52rem;
  border-radius: 0.085rem;
  width: 1.914rem;
  height: 0.52rem;
  left: 2.329rem;
  top: 5.529rem;
  background-color: rgba(80, 80, 80, 1);
}

.paidall {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -2.5rem;
  margin-top: -2rem;
  width: 5rem;
  height: 2.6rem;
  background-color: rgba(243, 239, 239, 1);
  text-align: center;
}
.paidall p {
  font-size: 0.4rem;
  margin: 0.6rem;
}
.paidall p span {
  font-size: 0.4rem;
  color: #419388;
}
.paidall a {
  display: block;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  line-height: 0.52rem;
  border-radius: 0.085rem;
  width: 1.914rem;
  height: 0.52rem;
  left: 2.329rem;
  top: 5.529rem;
  background-color: #419388;
}
/* 动画 */
/* .leftPop-enter-active,
.leftPop-leave-active {
  transition: opacity 0.5s;
} */
.leftPop-enter-active {
  animation: bounce-in 0.5s forwards;
}

@keyframes bounce-in {
  0% {
    left: -8rem;
  }

  100% {
    left: 0rem;
  }
}
.listBtnCon {
  display: flex;
  justify-content: space-around;
}
.listBtn {
  display: block;
  width: 2rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  color: #419388;
  border: 1px solid #419388;
  border-radius: 0.1rem;
  font-size: 0.3rem;
}
</style>
